<template>
  <div id="user-songs">
    <div class="left-panel">
      <div
        class="user-info"
        v-if="userData !== null"
      >
        <div class="user-avatar">
          <img
            :src="userData?.avatarUrl || ''"
            alt=""
          />
          <div class="user-name">{{ userData?.nickname }}</div>
        </div>
        <div class="user-vo">
          <div
            class="user-vo-item"
            @click="changeRoute('Favorites')"
          >
            <p>收藏</p>
            <p>{{ userFavorites?.total }}</p>
          </div>
          <div
            class="user-vo-item"
            @click="changeRoute('Subscribe')"
          >
            <p>关注</p>
            <p>0</p>
          </div>
        </div>
      </div>
      <div
        class="user-info"
        v-else
      >
        <div class="user-avatar">请先登录</div>
      </div>
      <div class="user-panel">
        <ul>
          <li
            v-for="(item, index) in options"
            :key="index"
            class="user-item"
            @click="changeRoute(item.path)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="right-panel">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import type { UnifyResponse, UserVO } from '@/types/result'
import { useUserStore } from '@/stores/userStore.ts'
import router from '@/utils/router'
import type { PageDTO, SongsPageDTO, SongsPageInfo } from '@/types/song'
import { getUserFavoritesAPI } from '@/services/songService.ts'
import { SortBy, SortOrder } from '@/utils/common/enum.ts'

const userData = ref<UserVO | null>(null)
const userStore = useUserStore()
const options = [
  {
    name: '个人信息',
    path: 'Personal',
  },
  {
    name: '充值',
    path: 'Deal',
  },
  {
    name: '历史记录',
    path: 'History',
  },
  {
    name: '消息管理',
    path: 'Message',
  },
]
const userFavorites = ref<PageDTO<SongsPageDTO[]> | null>()

const changeRoute = (path: string) => {
  router.push({
    name: path,
  })
}

const initUser = () => {
  if (userStore.token === null || userStore.userVO === null) {
    return
  }
  userData.value = userStore.userVO
}

const initUserFavorites = async (page?: number) => {
  try {
    const data: SongsPageInfo = {
      page: page || 1,
      size: 10,
      sortBy: SortBy.CREATED,
      sortOrder: SortOrder.ASC,
    }
    const res: UnifyResponse<PageDTO<SongsPageDTO[]>> = await getUserFavoritesAPI(data)
    if (res.code === 200) {
      userFavorites.value = res.data || null
    }
    useUserStore().favoriteList = userFavorites.value || null
  } catch (e) {
    console.error(e)
  }
}

onBeforeMount(() => {
  initUser()
  if (userStore.token !== null && userStore.userVO !== null) {
    initUserFavorites()
  }
})
</script>

<style scoped>
#user-songs {
  width: 70rem;
  height: 60rem;
  margin: 1em auto 0;
  background-color: rgba(219, 255, 233, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
}

.left-panel {
  width: 25em;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 0.5em solid #c2ffed;
  border-left: 0.5em solid #c2ffed;
}

.right-panel {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(168, 200, 183, 0.47);
}

.user-info {
  height: 25em;
}

.user-avatar {
  width: 100%;
  height: 15em;
  text-align: center;
}

.user-avatar img {
  margin-top: 2em;
  width: 13em;
  height: 13em;
  background: #fff;
  border-radius: 50%;
}

.user-name {
  font-size: 2em;
}

.user-vo {
  display: flex;
  justify-content: space-around;
}

.user-vo-item {
  margin-top: 2em;
  height: 5em;
  font-size: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-vo-item:hover {
  cursor: pointer;
}

.user-panel {
  flex-grow: 1;
}

.user-panel ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.user-panel li {
  height: 5em;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000000;
}

.user-panel li:hover {
  background-color: #c2ffed;
  cursor: pointer;
}
</style>
